<template>
  <!-- html 结构 -->
  <div class="person">
    <!-- <h2 id="title">App.vue中的标签内容</h2> -->
  </div>

  <!-- vue3中可以写多个根标签，vue2不可以 -->
  <!-- vue3中父组件引入子组件时，子组件中的属性是受保护的。要想查看子组件中的属性，需要子组件主动允许 -->
  <Person ref="app_ref" />
</template>

<!-- vue2的写法 -->
<!-- <script lang="ts">
import Person from './components/Person.vue';
// JS or TS
    export default {
        name: 'App',
        // 注册组件
        components: {Person}
    }
</script> -->

<!-- vue3的写法 -->
<script lang="ts" name="App" setup>
import Person from "./components/Person.vue";
</script>
